<template>
	<view
		class="flex bg-white align-center justify-between"
		hover-class="hoverClass"
		:style="{
			height: cellHeight + 'px',
			padding: cellPadding,
		}"
		@click.native.stop="handleCellClick()"
	>
		<view>
			<text
				:style="{
					fontSize: titleSize + 'px',
					color: titleColor,
				}"
			>
				{{ title }}
			</text>
		</view>
		
		<view class="flex align-center">
			<view v-if="rightContent">
				<text
					:style="{
						fontSize: rightContentSize + 'px',
						color: rightContentColor,
					}"
				>
					{{ rightContent }}
				</text>
			</view>
			
			<view v-if="isLink">
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否需要跳转
			isLink: {
				type: Boolean,
				default: false
			},
			
			// 组件高度
			cellHeight: {
				type: Number,
				default: 60
			},
			
			// 组件内边距
			cellPadding: {
				type: String,
				default: '0 15px'
			},
			
			// 标题
			title: {
				type: String,
				default: ''
			},
			
			// 标题大小
			titleSize: {
				type: Number,
				default: 14
			},
			
			// 标题颜色
			titleColor: {
				type: String,
				default: '#333333'
			},
			
			// 组件右侧内容
			rightContent: {
				type: String,
				default: ''
			},
			
			// 组件右侧内容字体大小
			rightContentSize: {
				type: Number,
				default: 14
			},
			
			// 组件右侧内容字体颜色
			rightContentColor: {
				type: String,
				default: '#999999'
			}
		},
		
		data() {
			return {
				
			}
		},
		
		methods: {
			// 点击组件的回调
			handleCellClick() {
				this.$emit('handleCellClick')
			}
		}
	}
</script>

<style>
	
</style>